<template>
  <view class="page-message-list">
    <uiScroll
      class="page-scroll"
      ref="mescrollRef"
      @init="mescrollInit"
      :up="upOption"
      @up="loadOrderListData"
    >
      <block v-for="item in list" :key="item.id">
        <block v-if="type == 1">
          <notificationSuccessTemplate
            v-if="item.redirectLinkType === 1"
            title="支付成功"
            :publishTime="item.createTime"
            :showImage="item.picUrl"
            :content="item.content"
          ></notificationSuccessTemplate>
          <notificationSuccessTemplate
            v-else-if="item.redirectLinkType === 2"
            title="激活成功"
            :publishTime="item.createTime"
            :showImage="item.picUrl"
            :content="item.content"
          ></notificationSuccessTemplate>
          <notificationSuccessTemplate
            v-else
            title="课程下架"
            :publishTime="item.createTime"
            :showImage="item.picUrl"
            :content="item.content"
          ></notificationSuccessTemplate>
        </block>
        <block v-else>
          <view class="message-box ui-1px-b">
            <gonggaoTemplate
              :publishTime="item.createTime"
              :showImage="item.picUrl"
              :content="item.content"
            ></gonggaoTemplate>
          </view>
        </block>
      </block>
    </uiScroll>
  </view>
</template>

<script>
import uiScroll from "@/components/base/scroll/mescroll-body";
import uiScrollMixins from "@/components/base/scroll/mescroll-mixins.js";
import { loadMessageListDataAPI } from "api/order/profile.js";
import { url } from "@/utils/url.js";

import notificationSuccessTemplate from "@/components/business/notification/pay-success";
import gonggaoTemplate from "@/components/business/notification/gonggao";

export default {
  name: "messageListPage",
  components: {
    uiScroll,
    notificationSuccessTemplate,
    gonggaoTemplate
  },
  mixins: [uiScrollMixins],
  data() {
    return {
      // 下拉刷新的常用配置
      downOption: {
        use: false, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        textNoMore: "没有更多数据",
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 5, // 每页数据的数量,默认10
          totalPage: 1
        },
        empty: {
          tip: "暂无相关数据"
        }
      },
      // 当前页面查询的参数
      activeIndex: 1,
      list: []
    };
  },
  onLoad(e) {
    this.type = e.type || 1;
  },

  methods: {
    loadOrderListData(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      var params = {
        page: {
          currentPage: page.num,
          pageNumber: pageSize
        },
        type: this.type == 1 ? 1 : 2
      };
      var _this = this;
      loadMessageListDataAPI(params).then(({ respCode, respMsg, result }) => {
        this.isloading = false;
        if (respCode !== "0") {
          // 加载失败
          this.$toast.fail(respMsg);
          return;
        }
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(result.list); //追加新数据
        this.mescroll.endByPage(this.list.length, result.page.totalPage);
      });
    },

    handleChangeTabs() {
      this.list = [];
      this.upOption.page.num = 0;
      this.loadOrderListData(this.upOption.page);
    }
  }
};
</script>

<style scoped lang="scss" >
.page-message-list {
  .message-read {
    flex: 0 0 20rpx;
    display: inline-block;
    height: 16rpx;
    width: 16rpx;
    border-radius: 50%;
    background-color: $brand-primary;
    margin-left: 20rpx;
    margin-top: 10rpx;
    // position: absolute;
    // left: -10rpx;
    // top: 50rpx;
  }
}
</style>
